<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>武汉大学校园3D地图</title>
    <style type="text/css">
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
        margin: 0;
      }
      #map {
        height: 100%;
        width: 100%;
      }
      #reset {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 1;
        transform: scale(1); /* 设置按钮放大倍数 */
        border: none; /* 去掉按钮的边框 */
        padding: 0; /* 去掉按钮的内边距 */
        outline: none; /* 去掉按钮的聚焦状态边框 */
        background-color: transparent; /* 设置按钮背景透明 */
      }
      #scenery {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
      }
      #select {
        position: absolute;
        top: 30px;
        left: 10px;
        z-index: 1;
      }
      #selection {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
      }
      #header {
        font-size: 32px;
        font-weight: bold;
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translate(-50%, -50%); /* 居中对齐 */
        z-index: 9;
        /* 渐变色 */
        background: linear-gradient(
          to right,
          #ff0000,
          #a9c21c,
          #12dc52
        ); /* 设置文字颜色为彩色渐变 */
        -webkit-background-clip: text; /* Webkit浏览器的背景裁剪，实现彩色文字效果 */
        -webkit-text-fill-color: transparent; /* Webkit浏览器的文字填充颜色，设为透明以显示背景渐变 */
      }
      /* select美化 */
      .shortselect {
        background: #fafdfe;
        height: 28px;
        width: 135px;
        line-height: 28px;
        border: 1px solid #9bc0dd;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        text-align: center;
      }

      /* 跳转按钮美化 */
      .circle {
        margin-top: 16px;
        background-color: #f4f1f1;
        color: rgb(5, 5, 5);
        position: relative;
        z-index: 1;
        overflow: hidden;
        border: 1px solid #9bc0dd;
      }

      .circle::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        width: 1rem;
        height: 1rem;
        transform: translate3d(-50%, -50%, 0) scale(0, 0);
        border-radius: 50%;
        background-color: #a6eeac;
        transform-origin: center;
        transition: ease-in-out 0.5s;
      }

      .circle:hover::before {
        transform: translate3d(-50%, -50%, 0) scale(15, 15);
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <button id="reset"><img src="定位.png" /></button>
      <div id="header">
        <a href="https://130.whu.edu.cn/">武汉大学130周年校庆</a>
      </div>
      //实现选择地图类型
      <button id="select" class="circle">查询</button>
      <select id="selection" class="shortselect">
        <option value="">--请选择地图类型--</option>
        <option value="bus.html">食堂图</option>
        <option value="map.html">景点图</option>
        <option value="bus.html">校巴图</option>
      </select>
    </div>

    <script>
      //实现选择地图类型跳转
      // 获取下拉选择和按钮的元素
      var selection = document.getElementById("selection");
      var goButton = document.getElementById("select");

      // 添加按钮点击事件监听器
      goButton.addEventListener("click", function () {
        // 获取选择的选项值
        var selectedOption = selection.value;

        // 跳转到选定的页面
        window.location.href = selectedOption;
      });
    </script>

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=9b551938141cdc8b263341f780dccbcc&plugin=AMap.Geocoder,AMap.DistrictSearch,AMap.MouseTool,AMap.OverView,AMap.Scale"></script>
    <script>
      // 初始化地图对象
      var map = new AMap.Map("map", {
        center: [114.364477, 30.534181],
        zoom: 17,
        pitch: 60,
        viewMode: "3D",
        expandZoomRange: true,
        zooms: [3, 20],
      });

      //添加缩放按钮
      AMap.plugin(["AMap.ControlBar"], function () {
        // 添加 3D 罗盘控制
        map.addControl(new AMap.ControlBar());
      });

      // 设置地图语言
      map.setLang("zh_cn");

      //食堂
      var marker_hbst = new AMap.Marker({
        position: [114.370767, 30.541275],
        title: "湖滨食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_tyst = new AMap.Marker({
        position: [114.358482, 30.541603],
        title: "田园食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_gyst = new AMap.Marker({
        position: [114.358622, 30.538387],
        title: "桂园食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_syst = new AMap.Marker({
        position: [114.365942, 30.543718],
        title: "水苑食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_gxbst = new AMap.Marker({
        position: [114.366012, 30.543113],
        title: "工学部一食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_xhyst = new AMap.Marker({
        position: [114.360573, 30.530425],
        title: "星湖园食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_xxxb4st = new AMap.Marker({
        position: [114.358379, 30.527246],
        title: "信息学部四食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_xxxb1st = new AMap.Marker({
        position: [114.359248, 30.528332],
        title: "信息学部一食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_fyst = new AMap.Marker({
        position: [114.371752, 30.537079],
        title: "枫园食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_myst = new AMap.Marker({
        position: [114.364666, 30.535859],
        title: "梅园食堂",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      //添加信息窗体
      var infoWindow_hb = new AMap.InfoWindow({
        content: "湖滨食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_hbst.on("click", function () {
        infoWindow_hb.open(map, marker_hbst.getPosition());
      });

      var infoWindow_ty = new AMap.InfoWindow({
        content: "田园食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_tyst.on("click", function () {
        infoWindow_ty.open(map, marker_tyst.getPosition());
      });

      var infoWindow_gy = new AMap.InfoWindow({
        content: "桂园食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_gyst.on("click", function () {
        infoWindow_gy.open(map, marker_gyst.getPosition());
      });

      var infoWindow_fy = new AMap.InfoWindow({
        content: "枫园食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_fyst.on("click", function () {
        infoWindow_fy.open(map, marker_fyst.getPosition());
      });

      var infoWindow_sy = new AMap.InfoWindow({
        content: "水苑食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_syst.on("click", function () {
        infoWindow_sy.open(map, marker_syst.getPosition());
      });

      var infoWindow_xxxb1 = new AMap.InfoWindow({
        content: "信息学部一食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_xxxb1st.on("click", function () {
        infoWindow_xxxb1.open(map, marker_xxxb1st.getPosition());
      });

      var infoWindow_xxxb4 = new AMap.InfoWindow({
        content: "信息学部四食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_xxxb4st.on("click", function () {
        infoWindow_xxxb4.open(map, marker_xxxb4st.getPosition());
      });

      var infoWindow_gxb1 = new AMap.InfoWindow({
        content: "工学部一食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_gxbst.on("click", function () {
        infoWindow_gxb1.open(map, marker_gxbst.getPosition());
      });

      var infoWindow_my = new AMap.InfoWindow({
        content: "梅园食堂",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_myst.on("click", function () {
        infoWindow_my.open(map, marker_myst.getPosition());
      });

      var infoWindow_xhy = new AMap.InfoWindow({
        content: "星湖园餐厅",
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_xhyst.on("click", function () {
        infoWindow_xhy.open(map, marker_xhyst.getPosition());
      });

      // 添加重新定位按钮
      var resetBtn = document.getElementById("reset");
      resetBtn.onclick = function () {
        map.setCenter([114.364477, 30.534181]);
        map.setZoom(17);
        map.setPitch(60);
      };
    </script>
  </body>
</html>
